<template>
	<view class="address_item" @tap="checked">
		<up-checkbox v-if="needCheck" @change="checked" usedAlone inactiveColor="#000" activeColor="#000 "
			:checked="props.info.checked" :customStyle="{marginRight: '10px'}"></up-checkbox>
		<view class="u-flex-1">
			<view class="info_">
				<view class="u-flex u-flex-item u-flex-items-center">
					<view class="f-s-18 f-w-b">{{props.info.surname}}{{props.info.name}}</view>
					<view class="f-s-14 f-w-b u-m-l-26">{{props.info.phone}}</view>
					<view class="default u-m-l-20" v-if="props.info.isDefault === 1">默认</view>
				</view>
				<view class="edit" @click="toEdit">编辑</view>
			</view>
			<view class="u-m-t-24 u-info f-s-12">
				<view>{{props.info.province}} {{props.info.city}} {{props.info.area}}</view>
				<view class="u-m-t-20">{{props.info.address}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useAddressStore
	} from '@/store/useAddressStore.js';
	import {
		ref
	} from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		},
		needCheck: {
			type: Boolean,
			default: false
		}
	})
	const addressStore = useAddressStore();

	const checked = () => {
		addressStore.setSelectedAddress(props.info);
		uni.navigateBack();
	}

	const toEdit = () => {
		uni.navigateTo({
			url: '/subPackages/mine/address/edit?id=' + props.info.id
		})
	}
</script>

<style lang="scss">
	.address_item {
		background-color: #fff;
		padding: 20px 24px;
		margin-bottom: 12px;
		display: flex;
		align-items: center;

		.info_ {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.default {
				// 默认的便签
				background-color: #DDD;
				padding: 0 6px;
				font-size: 10px;
				color: #000;
				height: 20px;
				line-height: 20px;
			}
		}

		.edit {
			font-size: 12px;
			font-weight: bolder;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				display: inline-block;
				width: 26px;
				height: 1px;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #000;
			}
		}
	}
</style>